<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '图片裁剪',
  },
}
</route>

<template>
  <view>
		<qf-image-cropper ref="qfImageCropper" :width="500" :height="500" @crop="handleCrop"></qf-image-cropper>
  </view>
</template>
  
<script lang="ts" setup>
import QfImageCropper from '@/components/qf-image-cropper/qf-image-cropper.vue';
import { useUserStore } from '@/store';
import { back, checkImg, comUploadFile } from '@/utils';

const user = useUserStore();
const qfImageCropper = ref();
onMounted(() => {
  qfImageCropper.value.handleShow();
})

const handleCrop = async(e) => {
  const isPass = await checkImg(e.tempFilePath);
  if (isPass) {
    await comUploadFile({
      url: '/user-info/addAvatar',
      tempFilePath: e.tempFilePath,
      formData: { userId: user.userInfo.id }
    })
    user.loginSubmit = true;
    user.getUserInfo();
    back();
  }
}
</script>

<style lang="scss" scoped>
</style>
  